import styled from "@emotion/styled"
import { CSSProperties, memo, useMemo } from "react"
import { useFormContext } from "react-hook-form"
import Svg from "../base/Svg"

interface TextareaWithCounterProps {
    fieldName: string
    key: string
    maxLength?: number
    label?: string
    placeholder?: string
    style?: CSSProperties
    className?: string
}

const TextareaWithCounter = memo(
    ({
        fieldName = "description",
        maxLength = 1000,
        label,
        placeholder,
        className = "",
        style,
    }: TextareaWithCounterProps) => {
        const methods = useFormContext()
        const { register, watch, formState } = methods

        const value = watch(fieldName)
        const error = formState.errors[fieldName]
        const charCount = useMemo(() => value?.length || 0, [value])
        return (
            <TextareaItem className={`${error ? "error" : ""} ${className}`}>
                {label && <TextareaLabel htmlFor={"inputText-" + fieldName}>{label}</TextareaLabel>}
                <TextareaBox
                    id={"inputText-" + fieldName}
                    placeholder={placeholder || ""}
                    style={style}
                    maxLength={maxLength}
                    {...register(fieldName, {
                        maxLength: {
                            value: maxLength,
                            message: `Maximum ${maxLength} characters allowed`,
                        },
                        value: value || "",
                    })}
                />
                <Count className={`${charCount > maxLength ? "overMax" : ""}`}>
                    {charCount}/{maxLength}
                </Count>
                {error && (
                    <VerifyMessage>
                        <em>
                            <Svg src={"components/form_item/public_fail_icon.svg"} />
                        </em>
                        {error?.message as string}
                    </VerifyMessage>
                )}
            </TextareaItem>
        )
    },
)

export default TextareaWithCounter

const TextareaItem = styled.div`
    position: relative;
    &.error p {
        display: block;
    }

    &.error textarea {
        color: #40444f;
        border-color: #f51450;
        background-color: #fee2e9;
    }

    &.error label {
        color: #ff4d4f;
    }

    &.overMax {
    }
`

const TextareaLabel = styled.label`
    display: block;
    margin-bottom: 8rem;
    color: #131416;
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: 0;
`

const TextareaBox = styled.textarea`
    box-sizing: border-box;
    width: 100%;
    min-height: 288rem;
    padding: 12rem 12rem 32rem;
    border: 1px solid #d9d9d9;
    border-radius: 6rem;
    resize: vertical;
    font-size: 14rem;
    transition: border-color 0.3s;
    background-color: #f5f5f5;
    &:focus {
        outline-color: #005ae0;
    }
    &::placeholder {
        font-family: "Gilroy", sans-serif;
        font-weight: 500;
        font-size: 16rem;
        line-height: 24rem;
        letter-spacing: 0;
        color: #9fa7bc;
    }
`

const Count = styled.div`
    position: absolute;
    bottom: 12rem;
    right: 12rem;
    color: #9fa7bc;
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 10rem;
    line-height: 12rem;
    letter-spacing: 0;
    text-align: right;
    &.overMax {
        color: #ff4d4f;
    }
`

const VerifyMessage = styled.p`
    display: none;
    position: absolute;
    bottom: -24rem;
    left: 0;
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: 0;
    color: #fb2d60;
    padding-left: 20rem;
    margin: 0;
    & > em {
        position: absolute;
        display: block;
        width: 16rem;
        height: 16rem;
        top: 0;
        left: 0;
        line-height: normal;
        text-align: center;
    }
`
